	<include file="public@head"/>
	<style>
		#chart .bigChart{
			width: 100%;
			margin-right: 2%;
			height: 100%;
			float: left;
			background-color: #fff;
		}
		#chart .rightBox{
			width: 20%;
			height: 100%;
			float: left;
			background-color: #fff;
		}
		#chart .smallChart{
			width: 100%;
			height: 350px;
		}
		.tips{
			text-align: center;
		}
		.tips h1{
			margin-top: 10px;
			margin-bottom: 30px; 
			color: #5197FF;
		}
		.tips:last-child h1{
			color: #F08E00;
		}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="panel panel-default">
			<div class="panel-heading">
	            <h3 class="panel-title">统计六</h3>
	        </div>
			<div class="content">
				<!-- 图表 -->
				<div class="chart" id="chart">
					<div class="bigChart"></div>
				</div>
			</div>
		</div>
	</div>
	<include file="public@scripts"/>
	<script>
		$(function () {
			//中间的图形
			var myChart = echarts.init($(".bigChart")[0]);
			var option = {
				title: {
					text: '数据统计',
					left: '8%'
				},
				xAxis: {
					type: 'category',
					name: '时间',
					splitLine: {
						interval: 0,
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
					boundaryGap: false,
					data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
					axisLabel: {
						formatter: '{value} 日'
					}
				},
				yAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							type: 'dashed'
						}
					},
					name: '金额',
					nameLocation: 'end',
					nameTextStyle: {
						align: 'right'
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						formatter: '{value} k'
					}
				},
				legend: {
					top: 20,
					right: '100',
					data: ['黑金奖']
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					backgroundColor: '#ffffff',
					textStyle: {
						color: ['#000']
					}
				},
				series: [{
					name: '黑金奖',
					data: [13, 15, 13, 15, 13, 15, 13, 21, 18, 15, 16, 18, 19, 17, 22],
					type: 'line',
					showSymbol: false,
					smooth: false,
					itemStyle: {
						normal: {
							color: "rgba(141, 202, 255, 1)"
						},
					}
				}]
			};
			myChart.setOption(option);


			// 右侧的小图
			data = [{
				'name': '团队业绩',
				'value': 51322
			}, {
				'name': '团队数量',
				'value': 16322
			}]
			let seriesObjs = [];
			let color = ['#F08E00', '#5197FF'];
			for (let i = 0; i < data.length; i++) {
				let seriesObj = {
					name: data[i].name,
					type: 'pie',
					clockWise: false,
					radius: [79 - i * 20, 80 - i * 20],
					itemStyle: {
						normal: {
							borderWidth: 10,
							borderColor: color[i]
						}
					},
					hoverAnimation: false,
					data: [{
						value: data[i].value,
						label: {
							normal: {
								show: true,
								position: 'outside',
								formatter: '{a}',
								textStyle: {
									color: '#000'
								}
							}
						},
						labelLine: {
							normal: {
								show: true,
								lineStyle: {
									color: color[i]
								}
							}
						}
					}, {
						value: data[0].value * 4 / 3 - data[i].value,
						name: 'invisible',
						itemStyle: {
							normal: {
								color: 'rgba(0, 0, 0, 0)',
								borderColor: 'rgba(0, 0, 0, 0)'
							}
						}
					}]
				}
				seriesObjs.push(seriesObj)
			}

		});
	</script>
</body>

</html>